<template>
  <div>
    <el-drawer
      class="dia-style"
      :title="title"
      :visible.sync="open"
      size="70%"
      :close-on-click-modal="false"
      :wrapper-closable="false"
      @close="cancel">
      <div class="drawer-container">
        <el-col :span="24">
          <div class="tips">基础信息</div>
        </el-col>
        <HkDetails :details-list="detailsLists" label-position="left" :form-data="baseInfo" label-width="120" >
            <template #ip>
              <span class='link' @click="handleJump(baseInfo.ip)">{{baseInfo.ip}}</span>
            </template>
        </HkDetails>
        <el-col :span="24">
          <div class="tips">判定信息</div>
        </el-col>
        <HkForm
          ref="hkFormRef"
          :form-labels="formLabel"
          :rules="formRules"
          :data="formData"
          :dict-list="newDictList"
          :btn-hidden="true"
          label-width="140"
          label-position="left"
          @handleEvent="handleEvent">
          <template #filter-equipmentOrgId>
            <treeselect
              v-model="formData.equipmentOrgId"
              :options="dictList.orgList"
              :normalizer="normalizer"
              :append-to-body="true"
              placeholder="请选择责任部门"
              @select="changeOrg"
              noResultsText="无匹配数据"  />
          </template>
          <template #filter-equipmentUserId>
            <el-select
              v-model="formData.equipmentUserId"
              filterable
              placeholder="请选择责任人"
              size="12"
              style="width: 100%"
              :clearable="true"
              @change="handleChange">
              <el-option v-for="item in userListData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </HkForm>
      </div>
      <div class="drawer-footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <!-- <el-button plain @click="handleCheckOrder()">发起核实工单</el-button> -->
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-drawer>
    <checkOrderDialog ref="checkOrderRef" />
  </div>
</template>

<script>
import HkDetails from '@/components/Hk-Details/noStyleDetail.vue'
import HkForm from '@/components/Hk-Form'
import checkOrderDialog from '@/views/assets/unknownAssets/component/checkOrderDialog'
import { validateIP, validateMAC } from '@/utils/validate'
import { queryUserList } from '@/api/assets/host.js'
import { determine } from '@/api/assets/unknownAssets'
import Treeselect from '@riophae/vue-treeselect'

export default {
  components: { HkDetails, HkForm, checkOrderDialog, Treeselect },
  props: {
    dictList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: '判定',
      open: false,
      formData: {
        type: 'host',
      },
      // 表单校验
      formRules: {
        type:[{ required: true, message: '不能为空', trigger: 'change' }],
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        equipmentIp: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' },
        ],
        equipmentMac: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validateMAC, trigger: 'blur' },
        ],
        equipmentNo: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentType: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentLocalized: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentNetType: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentUserId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentOrgId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentUseStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentSecLevel: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentDomainId: [{ required: true, message: '不能为空', trigger: 'change' }],
      },
      formLabel: [
        {
          label: '设备分类',
          field: 'type',
          type: 'select',
          list: 'typeList',
          span: 24,
        },
        {
          label: '设备名称',
          field: 'name',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '设备编号',
          field: 'equipmentNo',
          type: 'input',
          maxlength: 36,
        },
        {
          label: '设备IP',
          field: 'equipmentIp',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '设备MAC',
          field: 'equipmentMac',
          type: 'input',
          maxlength: 17,
          attrs: {
            placeholder: '格式00:50:56:C0:00:08',
          },
        },
        {
          label: '设备类型',
          field: 'equipmentType',
          type: 'select',
          list: 'equipmentTypeList',
        },
        // {
        //   label: '设备类别',
        //   field: 'equipmentCategory',
        //   type: 'select',
        //   list: 'equipmentCategoryList',
        //   hidden: false,
        // },
        {
          label: '联网类型',
          field: 'equipmentNetType',
          type: 'select',
          list: 'newEquipmentHostNetTypeList',
        },
        {
          label: '是否国产化',
          field: 'equipmentLocalized',
          type: 'select',
          list: 'equipmentLocalizedList',
        },

        {
          label: '责任部门',
          field: 'equipmentOrgId',
          type: 'slot',
        },
        {
          label: '责任人',
          field: 'equipmentUserId',
          type: 'slot',
        },
        {
          label: '使用状态',
          field: 'equipmentUseStatus',
          type: 'select',
          list: 'equipmentUseStatusList',
        },
        {
          label: '设备状态',
          field: 'equipmentStatus',
          type: 'select',
          list: 'equipmentStatusList',
        },
        {
          label: '涉密等级',
          field: 'equipmentSecLevel',
          type: 'select',
          list: 'newEquipmentSecLevelList',
        },
        {
          label: '所在安全域',
          field: 'equipmentDomainId',
          type: 'select',
          list: 'assetsSecDomainAutoList',
        },
      ],
      detailsLists: [
        { label: 'IP地址:', field: 'ip',type:'slot', span: 12 },
        { label: 'MAC地址:', field: 'mac', span: 12 },
        { label: '首次发现时间:', field: 'firstDiscoveryTime', span: 12 },
        { label: '末次发现时间:', field: 'lastDiscoveryTime', span: 12 },
      ],
      baseInfo: {},
      // 人员信息
      userListData: [],
    }
  },
  computed: {
    newDictList: {
      get() {
        return this.dictList
      },
    },
  },
  methods: {
    show(row) {
      this.baseInfo = row
      this.$set(this.formData,'equipmentIp',row.ip)
      
      this.open = true
    },
    // 点击责任人
    handleChange(){
      this.$forceUpdate();
    },
    //  点击ip跳转
    handleJump(ip){
      this.$router.push(window.prefix +'/dispose/logTracing?ip='+ip);
    },
    //  点击保存按钮
    handleSubmit() {
      this.$refs.hkFormRef.handleFormSubmit('formLabels').then((res) => {
        determine({ id: this.baseInfo.id, type: this.formData.type, data: JSON.stringify(this.formData) }).then(
          (res) => {
            this.$message.success('保存成功')
            this.cancel()
            this.$emit('handleSubmit')
          }
        )
      })
    },
    // 点击发起核实工单
    handleCheckOrder() {
      this.$refs.checkOrderRef.show(this.baseInfo)
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      }
    },
    // 部门change事件
    changeOrg(node) {
      if (this.formData.equipmentUserId) {
        this.formData.equipmentUserId = ''
      }
      this.getUserList(node.id)
    },
    /** 查询列表 */
    getUserList(id) {
      queryUserList(id).then((res) => {
        this.userListData = res
      })
    },
    /** 设备类型变化 */
    handleEvent(obj) {
      //  设备类型变化
      if (obj.field == 'equipmentType') {
        if(obj.value == '1'){
        this.newDictList.newEquipmentHostNetTypeList = this.dictList.equipmentHostNetTypeList.filter(
          (item) => item.value !== '3'
        )
        this.newDictList.newEquipmentSecLevelList = this.dictList.equipmentSecLevelList.filter(
          (item) => item.value !== '1'
        )
        this.formData.equipmentNetType=''
        this.formData.equipmentSecLevel=""
        } else {
        this.newDictList.newEquipmentHostNetTypeList = this.dictList.equipmentHostNetTypeList
        this.newDictList.newEquipmentSecLevelList = this.dictList.equipmentSecLevelList
      }
      }
      const { field, value } = obj
      //  设备分类变化
      if (field == 'type') {
        const formLabelObj = this.formLabel.find((i) => {
          return i.field == 'equipmentType'
        })
        switch (value) {
          // 终端设备
          case 'host':
            formLabelObj.list = 'equipmentTypeList'
            this.$set(this.formData, 'equipmentType', '')
            break
          // 服务器设备
          case 'server':
            formLabelObj.list = 'equipmentSerTypeList'
            this.$set(this.formData, 'equipmentType', '')

            break
          // 网络设备
          case 'net':
            formLabelObj.list = 'equipmentNetTypeList'
            this.$set(this.formData, 'equipmentType', '')
            break
        }
      }
      this.$forceUpdate();
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.$refs.hkFormRef.resetForm('formLabels')
    },
  },
}
</script>

<style lang="scss" scoped>
.link{
  cursor: pointer;
  color:#4b6eef;
}
.el-form {
  display: block !important;
}
</style>
